@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        line-height: 1.5;
        font-weight: 400;
        color-scheme: light dark;
        font-synthesis: none;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        @apply bg-[#F8FAFC] text-[#1F2937] m-0;
        min-width: 320px;
        min-height: 100vh;
        --header-height: 64px;
    }

    a {
        @apply font-medium text-primary no-underline;
    }

    a:hover {
        @apply text-[#535bf2];
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply font-semibold leading-[1.4];
    }
}

@layer components {
    button {
        @apply rounded-lg border border-transparent px-[1.2em] py-[0.6em] text-base font-medium bg-[#f9f9f9] cursor-pointer transition-colors;
    }

    button:hover {
        @apply border-[#646cff];
    }

    button:focus,
    button:focus-visible {
        @apply outline-none ring-4 ring-blue-300;
    }

    /* 自定义滚动条样式 */
    .scrollable::-webkit-scrollbar,
    body::-webkit-scrollbar {
        @apply w-[6px] h-[6px];
    }

    .scrollable::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb {
        @apply bg-gray-400/50 rounded-[3px];
    }

    .scrollable::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:hover {
        @apply bg-gray-400/70;
    }

    .scrollable::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        @apply bg-black/5;
    }

    /* 页面过渡效果 */
    .page-transition-enter {
        @apply opacity-0 translate-y-[10px];
    }

    .page-transition-enter-active {
        @apply opacity-100 translate-y-0 transition-all duration-300;
    }

    .page-transition-exit {
        @apply opacity-100 translate-y-0;
    }

    .page-transition-exit-active {
        @apply opacity-0 translate-y-[10px] transition-all duration-300;
    }
}